<#assign content>
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>用户列表</h3>
            </div>
            <div class="title_right">
                <form action="/user_list.do" method="post">
                <input type="hidden" id="range_startdate" name="startdate" value="<#if startdate?exists>${startdate}</#if>">
                <input type="hidden" id="range_enddate" name="enddate" value="<#if enddate?exists>${enddate}</#if>">
                <div class="col-md-6">
                    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                        <span></span><b class="caret"></b>
                    </div>
                </div>
                <div class="col-md-5 form-group pull-right top_search">
                    <div class="input-group">
                        <input type="text" class="form-control" id="search_username" name="username" value="<#if username?exists>${username}</#if>" placeholder="用户名">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Go!</button>
                    </span>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2><small></small></h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <#if RoleActionTag.roleActionCode(103)>
                            <li><a id="useradd"><i class="fa fa-plus-circle"></i></a></li>
                            </#if>
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30">

                        </p>
                        <table id="usertable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>用户名</th>
                                <th>姓名</th>
                                <th>角色</th>
                                <th>电话</th>
                                <th>手机</th>
                                <th>邮箱</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tfoot>
                            <tr>
                                <th>用户名</th>
                                <th>姓名</th>
                                <th>角色</th>
                                <th>电话</th>
                                <th>手机</th>
                                <th>邮箱</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</#assign>
<#include "../_inc/layout.ftl" />
// 用户新增
<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户新增</h4>
            </div>
            <form id="userAddForm" method="post" novalidate class="form-horizontal form-label-left">
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">用户名<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="username" name="username" data-validate-length-range="5,12"  pattern="alphanumeric"
                                   placeholder="请输入用户名" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3">密码<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="password" id="password" name="password" required="required" data-validate-length-range="6,12"
                                   pattern="alphanumeric" placeholder="请输入密码" class="form-control col-md-6">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3">确认密码<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="password" id="confirmpass" name="confirmpass" required="required" data-validate-length-range="6,12"
                                   data-validate-linked="password" spattern="alphanumeric" placeholder="请再次输入密码" class="form-control col-md-6">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3">角色<span class="required">*</span></label>
                        <div class="col-md-5">
                            <select name="role" id="roleList" class="form-control col-md-6" required>
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="saveuser" type="button" class="btn btn-success">保存</button>
                        <button class="btn btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

// 用户角色设置
<div class="modal fade" id="userSetRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户修改</h4>
            </div>
            <form id="userSetRoleForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" id="edit_userid"  name="userid">
                <input type="hidden" id="edit_username"  name="username">
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">用户名</label>
                        <div class="col-md-5">
                            <span id="edit_user_name" class="form-control"></span>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3">角色<span class="required">*</span></label>
                        <div class="col-md-5">
                            <select name="edit_role" id="edit_roleList" class="form-control col-md-6" required>
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="user_set_role" type="button" class="btn btn-success">保存</button>
                        <button class="btn btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

// 用户密码修改
<div class="modal fade" id="editPassModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户修改</h4>
            </div>
            <form id="editPassForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" id="edit_pass_username"  name="username">
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">密码<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="password" id="edit_password" name="edit_password" required="required" data-validate-length-range="6,12"
                                   pattern="alphanumeric" placeholder="请输入密码" class="form-control col-md-6">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3">确认密码<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="password" id="edit_confirmpass" name="edit_confirmpass" required="required" data-validate-length-range="6,12"
                                   data-validate-linked="edit_password" pattern="alphanumeric" placeholder="请再次输入密码" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="save_edit_pass" type="button" class="btn btn-success">保存</button>
                        <button class="btn btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

// 删除用户
<div class="modal fade" id="userDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户删除</h4>
            </div>
            <form id="userDeleteForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" id="delete_userid"  name="userid">
                <input type="hidden" id="delete_username"  name="username">
                <div class="modal-body">
                    <div class="item form-group">
                        <div class="col-md-10">
                            <span id="deleteUserMessage"></span>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="deleteuser" type="button" class="btn btn-success">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    var datatable;

    $(document).ready(function() {
        datatable = $('#usertable').DataTable({
            lengthChange: false,            // 是否允许用户自定义显示数量
            bPaginate: true,                // 翻页功能
            bFilter: false,                 // 列筛序功能
            ordering: false,                // 排序功能
            Info: true,                     // 页脚信息
            autoWidth: true,                // 自动宽度
            pageLength: 10,                 // 每页显示10条数据
            oLanguage: {                    // 国际语言转化
                oAria: {
                    sSortAscending: ': 以升序排列此列',
                    sSortDescending: ': 以降序排列此列'
                },
                sLengthMenu: '显示 _MENU_ 记录',
                sZeroRecords: '对不起，查询不到任何相关数据',
                sEmptyTable: '未有相关数据',
                sLoadingRecords: '正在加载数据...',
                sInfo: '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。',
                sInfoEmpty: '当前显示0到0条，共0条记录。',
                sSearch: '查询:',
                oPaginate: {
                    sFirst: '首页',
                    sPrevious: ' 上一页 ',
                    sNext: ' 下一页 ',
                    sLast: ' 尾页 '
                }
            },
            stripeClasses: ["odd", "even"],                         //为奇偶行加上样式，兼容不支持CSS伪类的场合
            paginationType: 'full_numbers',
            serverSide: true,
            ajax: function (data, callback, settings) {
                var param = {};                                     // 封装请求参数
                param.limit = data.length;                          // 页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;                           // 开始的记录序号
                param.page = (data.start / data.length) + 1;        // 当前页码
                param.action = 'page';
                param.username = $('#search_username').val();
                param.startdate = $('#range_startdate').val();
                param.enddate = $('#range_enddate').val();
                $.ajax({
                    type: 'POST',
                    url: '/user_list.do',
                    cache: false,                                   //禁用缓存
                    data: param,                                    //传入组装的参数
                    dataType: 'json',
                    success: function (result) {
                        // 封装返回数据
                        var returnData = {};
                        returnData.recordsTotal = result['recordsTotal'];              // 返回数据全部记录
                        returnData.recordsFiltered = result['recordsFiltered'];        // 后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result['records'];                           // 返回的数据列表
                        callback(returnData);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            },
            columns: [
                { data: 'username' },
                { data: 'pname' },
                { data: 'roleName' },
                { data: 'tel' },
                { data: 'phone' },
                { data: 'email' },
                { data: 'createTime',
                    render: function(data, type, row, meta) {
                        return $.jsonDateFormat(data, 'yyyy-MM-dd hh:mm:ss');
                    }
                },
                {
                    data: 'id', render: function(data, type, row, meta) {
                    var str = '';
                    var session = ${sessionUser};
                        <#if UserNameTag.getSysManager('${sessionUser}')>
                            <#if RoleActionTag.roleActionCode(109)>
                                str += '<button onclick="$.editPass(\'' + row.username + '\')" type="button" class="btn btn-success btn-xs"><i class="fa fa-pencil"></i>密码修改</button>';
                            </#if>
                            <#if RoleActionTag.roleActionCode(105)>
                                str += '<button onclick="$.userSetRole(' + data + ',\'' + row.username + '\')" type="button" class="btn btn-success btn-xs"><i class="fa fa-tag"></i>角色设置</button>';
                            </#if>
                            <#if RoleActionTag.roleActionCode(106)>
                                if (session != row.username) {
                                    str += '<button onclick="$.deleteUser(' + data + ',\'' + row.username + '\')" type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>删除</button>';
                                }
                            </#if>
                        </#if>
                        return str;
                    }
                }
            ],
            columnDefs: [
                { orderable: false, targets: '_all' },
                { defaultContent: '', targets: '_all'}
            ]
        } );


        // 用户新增
        $('#useradd').on('click', function() {

            var param = {};
            param.action = 'open';

            $.ajax({
                type: 'POST',
                url: '/user_add.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function(result) {
                    if(result.success) {
                        var optionsString = '<option value=\"\">---请选择---</option>';
                        for (var i in result.body.roleList) {
                            optionsString += '<option value=\"' + result.body.roleList[i].id + '\">'
                                    + result.body.roleList[i].roleName + '</option>';
                        }
                        $('#roleList').html(optionsString);
                        $('#userAddModal').modal({
                            keyboard: true
                        });
                    }
                    else {
                        $.promptModal('${warning}', result.body.msg, result.logout);
                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        });

        // 窗体关闭清空页面
        $('#userAddModal').on('hide.bs.modal', function () {
            $('#userAddForm')[0].reset();
        });

        // 提交保存
        $('#saveuser').on('click', function () {
            if(validator.checkAll($('#userAddForm'))) {
                var param = {};
                param.action = 'do';
                param.username = $('#username').val();
                param.password = $('#password').val();
                param.confirmpass = $('#confirmpass').val();
                param.role = $('#roleList').val();
                $('#userAddForm')[0].reset();
                $('#userAddModal').modal('hide');
                $.ajax({
                    type: 'POST',
                    url: '/user_add.do',
                    cache: false,
                    dataType: 'json',
                    data: param,
                    success: function(result) {
                        if(result.success) {
                            datatable.draw(false);
                        }
                        else {
                            $.promptModal('${warning}', result.msg, result.logout);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            }
        });

        // 修改用户角色
        $.userSetRole = function(id, username) {
            var param = {};
            param.action = 'edit';
            param.id = id;
            param.username = username;
            $.ajax({
                type: 'POST',
                url: '/user_set_role.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function (result) {
                    if(result.success) {
                        var optionsString = '<option value=\"\">---请选择---</option>';
                        for (var i in result.body.roleList) {
                            if(result.body.roleId == result.body.roleList[i].id) {
                                optionsString += '<option value=\"' + result.body.roleList[i].id + '\" selected = \"selected\">'
                                        + result.body.roleList[i].roleName + '</option>';
                            }
                            else {
                                optionsString += '<option value=\"' + result.body.roleList[i].id + '\">'
                                        + result.body.roleList[i].roleName + '</option>';
                            }
                        }
                        $('#edit_userid').val(id);
                        $('#edit_username').val(username);
                        $('#edit_user_name').html(result.body.user.username);
                        $('#edit_roleList').html(optionsString);
                        $('#userSetRoleModal').modal({
                            keyboard: true
                        });
                    }
                    else {
                        $.promptModal('${warning}', result.msg, result.logout);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        };

        // 删除
        $.deleteUser = function (id, username) {
            $('#delete_userid').val(id);
            $('#deleteUserMessage').html('确定删除' + username + '用户信息？');
            $('#userDeleteModal').modal({
                keyboard: true
            });
        };

        // 保存角色修改
        $('#user_set_role').on('click', function () {
            if(validator.checkAll($('#userAddForm'))) {
                var param = {};
                param.action = 'doEdit';
                param.id = $('#edit_userid').val();
                param.username = $('#edit_username').val();
                param.role = $('#edit_roleList').val();
                $('#userSetRoleForm')[0].reset();
                $('#userSetRoleModal').modal('hide');
                $.ajax({
                    type: 'POST',
                    url: '/user_set_role.do',
                    cache: false,
                    dataType: 'json',
                    data: param,
                    success: function(result) {
                        if(result.success) {
                            datatable.draw(false);
                        }
                        else {
                            $.promptModal('${warning}', result.msg, result.logout);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            }
        });

        // 用户密码修改
        $.editPass = function (username) {
            $('#edit_pass_username').val(username);
            $('#editPassModal').modal({
                keyboard: true
            });
        };

        // 保存修改密码
        $('#save_edit_pass').on('click', function () {
            if(validator.checkAll($('#userAddForm'))) {
                var param = {};
                param.action = 'doEdit';
                param.username = $('#edit_pass_username').val();
                param.password = $('#edit_password').val();
                param.confirmpass = $('#edit_confirmpass').val();
                $('#editPassForm')[0].reset();
                $('#editPassModal').modal('hide');
                $.ajax({
                    type: 'POST',
                    url: '/edit_password.do',
                    cache: false,
                    dataType: 'json',
                    data: param,
                    success: function(result) {
                        if(result.success) {
                            datatable.draw(false);
                        }
                        else {
                            $.promptModal('${warning}', result.msg, result.logout);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            }
        });

        // 保存删除
        $('#deleteuser').on('click', function () {
            var param = {};
            param.action = 'doDelete';
            param.id = $('#delete_userid').val();
            param.username = $('#delete_username').val();
            $('#userDeleteForm')[0].reset();
            $('#userDeleteModal').modal('hide');
            $.ajax({
                type: 'POST',
                url: '/user_delete.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function(result) {
                    if(result.success) {
                        datatable.draw(false);
                    }
                    else {
                        $.promptModal('${warning}', result.msg, result.logout);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        });
        //
        $.dateRangepPicker();
    });

</script>

